<template>
	<view :data-theme="theme">
		<!-- 1.导航 -->
		<view class="nav">
			<view class="nav-status">
				<view>
					{{returnStatus}}--{{orderInfo.status}}
					<text v-if="orderInfo.status == 4 && isReletOrder == 1">续租中</text>
					<text v-else-if="returnStatus == 2">归还中</text>
					<text v-else-if="orderInfo.status == 6 && returnStatus == 6">已归还</text>
					<text v-else>{{ orderInfo.status | orderStatusFilter }}</text>
				</view>
				<view>
					<view class="supplement" v-if="!nickname" @click="toDetail">完善资料</view>
				</view>
			</view>
			<view class="description" v-if="orderInfo.status == 1">您的订单预计在1-3个工作日内完成审核，请保持手机畅通，注意接听审核电话，如有疑问请联系客服</view>
			<view class="description" v-else-if="orderInfo.status == 2">您的订单已审核通过，请在24小时内完成支付，超时订单将自动关闭，如有疑问请咨询客服</view>
			<view class="description" v-else-if="orderInfo.status == 3">订单已发货，正快马加鞭向您敢来，商品需凭本人身份证签收，如有疑问请联系客服</view>
			<view class="description" v-else-if="orderInfo.status == 4">请按时支付租金，保持良好付租习惯，避免逾期影响您的信用</view>
			<view class="description" v-else-if='orderInfo.status == 8'>您的订单已取消，可重新提交申请，如有疑问请联系客服</view>
			<view class="description" v-else-if='orderInfo.status == 5 && returnStatus == 2'>您已提交归还，请等待商家确认归还设备，如有疑问请联系客服</view>
			<view class="description" v-else-if='orderInfo.status == 6 && returnStatus == 6'>您的订单已归还完成，欢迎再次租赁</view>
			<view class="description" v-else-if='orderInfo.status == 7'>您的订单已逾期，请尽快支付租金，以免造成不良记录，如有疑问请联系客服</view>
			<view class="description" v-else-if='orderInfo.status == 9'>很抱歉，您的订单审核未通过，可在30日后重新提交申请，如有疑问请联系客服</view>
			<view class="description" v-else-if='orderInfo.status == 5'>您的订单即将到期，请在到期前完成归还、买断或续租，如有疑问请联系客服</view>
			
			<view v-if="!nickname">(完善资料享极速审核)</view>
			<view style="margin-top: 8px;">{{orderInfo.placeOrderTime}}</view>
		</view>
		<!-- 2.个人信息 -->
		<view class="flex person">
			<view class="person-icon">
				<image
					src='https://img.youxuanan.com/crmebimage/public/product/2024/10/11/4721de23d1b4431592bc1ad4e69882fc5oqx3ouz8v.png'
					mode='widthFix' style="width: 100%;"></image>
			</view>
			<view style="margin: 0 20px;">
				<view class="person-info">
					<text>{{orderInfo.orderReal.realName || '-'}}</text><text>{{orderInfo.orderReal.phone || '-'}}</text>
				</view>
				<view class="person-address">
					<text>{{orderInfo.orderReal.detail || '-'}}</text>
				</view>
			</view>
			<view><i class="iconfont icon-fanhui2"></i></view>
		</view>
		<view class="goods-content goods">
			<view class="flex1">
				<view class="shop-icon">{{orderInfo.orderProduct.merName || '-'}}</view>
				<view><u-icon name="arrow-right" size="28"></u-icon></view>
			</view>
			<view class="flex goods">
				<image :src="orderInfo.orderProduct.goodsImage" mode='widthFix' style="width: 2rem;"></image>
				<view style="width: 200px; margin: 0 10px;">
					<view class="goods-info">{{orderInfo.orderProduct.goodsName}}</view>
					<view class="goods-tag">
						<text>{{orderInfo.orderProduct.specName}}</text>
					</view>
					<view class="flex goods-price">
						<view>每期租金:<text class="goods-price-icon">￥</text><text
								class="goods-price-num">{{orderInfo.orderProduct.periodicRent}}</text></view>
					</view>
				</view>
			</view>

			<view class="rent-time">
				<view class="rent-time-item">
					<view class="time-name">预计起租日</view>
					<view class="time-data">{{orderInfo.orderProduct.estimatedRentalDate}}</view>
				</view>
				<view>
					<image
						src="https://img.youxuanan.com/crmebimage/public/product/2024/10/11/ef0ab535d588418d9544d15eef5dea59cwm6mx1rlw.png"
						mode='widthFix' style="width:40px;"></image>
				</view>
				<view class="rent-time-item">
					<view class="time-name">预计归还日</view>
					<view class="time-data">{{orderInfo.orderProduct.estimatedReturnDate}}</view>
				</view>
			</view>
		</view>

		<!--已取消 审核拒绝公用-->
		<view v-if="orderInfo.status == 8 || orderInfo.status == 9">
			<Closed :orderInfo='orderInfo'></Closed>
		</view>

		<!--待审核=申请中-->
		<view v-if="orderInfo.status == 1">
			<WaitingReview :orderInfo='orderInfo'></WaitingReview>
		</view>

		<!--待支付-->
		<view v-if="orderInfo.status == 2">
			<WaitPay :orderInfo='orderInfo'></WaitPay>
		</view>

		<!--待签约 待发货 待收货 租用中 续租中 已逾期 待归还公用-->
		<view v-if="[15,3,10,4,7,5].includes(orderInfo.status) || returnStatus == 1 || returnStatus == 2">
			<Sign :orderInfo='orderInfo' :returnStatus='returnStatus'></Sign>
		</view>

		<!--已归还 已买断-->
		<view v-if="orderInfo.status == 12 || returnStatus == 6 || orderInfo.status == 6">
			<GiveBack :orderInfo='orderInfo'></GiveBack>
		</view>

		<view style="height: 100px;"></view>
		<!-- 6.合计支付 -->
		<view class="toPay">
			<view style="width: 25%;" v-if="orderInfo.status == 1">
				<view class="toPay-btn" v-if="orderInfo.cancelStatus == 1">取消中</view>
				<view class="toPay-btn" @click="cancelOrder" v-else>取消订单</view>
			</view>
			<view style="width: 25%;" v-if="orderInfo.status == 8">
				<view class="toPay-btn" @click="toPathProduct">重新下单</view>
			</view>
			<view style="width: 25%;" v-if="orderInfo.status == 1 && orderInfo.depositStatus == 0">
				<view class="toPay-btn" @click="verifySystem">授权</view>
			</view>
			<view style="width: 25%;" v-if='[2,3,4,5,6,7,10,12].includes(orderInfo.status)'>
				<view class="toPay-btn" @click="toShowBill">查看账单</view>
			</view>
			<view style="width: 25%;" v-if="orderInfo.status == 2">
				<view class="toPay-btn" @click="toPayFor">去支付</view>
			</view>
			<view style="width: 25%;" v-if="orderInfo.status == 15">
				<view class="toPay-btn">去签约</view>
			</view>
			<view style="width: 25%;" v-if="orderInfo.status == 10">
				<view class="toPay-btn" @click="findMyFast">查看物流</view>
			</view>
			<view style="width: 25%;" v-if='((orderInfo.status == 4 && returnStatus == 0)) || (orderInfo.status == 5 && returnStatus == 1)'>
				<view class="toPay-btn" @click="returnBack">归还</view>
			</view>
			<!-- <view style="width: 25%;" v-if='(orderInfo.status == 4) || (orderInfo.status == 5 && (returnStatus == 0 || returnStatus == 1))'>
				<view class="toPay-btn" @click="returnBack">归还</view>
			</view> -->
			<view style="width: 25%;" v-if='((orderInfo.status == 4 && returnStatus == 0)) || (orderInfo.status == 5 && returnStatus == 1) || orderInfo.status == 7'>
				<view class="toPay-btn" @click="toBuyOut">买断</view>
			</view>
			<!-- <view style="width: 25%;" v-if='[4,7].includes(orderInfo.status) || (orderInfo.status == 5 && (returnStatus == 0 || returnStatus == 1))'>
				<view class="toPay-btn" @click="toBuyOut">买断</view>
			</view> -->
			<view style="width: 25%;" v-if='(orderInfo.status == 4 && returnStatus == 0) || orderInfo.status == 7'>
				<view class="toPay-btn" @click="toPayFor">支付租金</view>
			</view>
			<view style="width: 25%;" v-if="orderInfo.status == 5 && returnStatus == 1">
				<view class="toPay-btn" @click="tapContinue">续租</view>
			</view>
			<view style="width: 25%;" v-if="(returnStatus == 2 || returnStatus == 6)">
				<view class="toPay-btn" @click="backInfo">归还详情</view>
			</view>
			<view style="width: 25%;" v-if="[6,8,12].includes(orderInfo.status) || returnStatus == 6">
				<view class="toPay-btn" @click="toPathProduct">再次下单</view>
			</view>
		</view>
		
		<view class="uniappBox">
			<view :hidden="!uniappShowModel" class="uniappContant">
				<view style="padding: 0 150rpx;">
					<view class="uniappTitle">取消订单</view>
					<text style="color: #C0C4CC;">取消原因</text>
					<view class="uniappNotice">
						<radio-group @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
								style="width: 100%;text-align: center;">
								<view>
									<radio :value="item.value" :checked="index === current" />
									<view style="display: inline-block;width: 100px;margin-left: 15px;text-align: left;">
										{{item.name}}
									</view>
								</view>
							
							</label>
						</radio-group>
					</view>
				</view>
				<!-- 确定取消按钮 -->
				<view class="uniappBtn">
					<view @tap="uniappShowModel = false">在考虑下</view>
					<view @tap="confirm()">确定</view>
				</view>
			</view>
			<!-- 背景黑色蒙版 -->
			<view class="uniappBgdCol" :hidden="!uniappShowModel" @tap="uniappShowModel = false"></view>
		</view>

2345671012
		<!-- status                     tinyint(3)     default 0                 not null comment '订单状态 0未完成、1待审核、2待支付、3待发货、4租用中（续租中）5待归还、6已完成、7逾期中、8订单取消、9审核拒绝、10待收货、12已买断、14风控拒绝 15 待签约 16 取消中',
		    cancel_status              tinyint(3)     default 0                 not null comment '取消状态  1用户取消、2商户取消、3平台取消 、4待支付超时取消',
		    return_status              tinyint(3)     default 0                 not null comment '归还状态 0无 1待归还，2归还中，3检测中，4待赔偿，5已逾期，6已完成 -->

	</view>
</template>
<script>
	import Closed from '@/components/orderRentInfo/Closed.vue';
	import WaitingReview from '@/components/orderRentInfo/WaitingReview.vue';
	import WaitPay from '@/components/orderRentInfo/WaitPay.vue';
	import Sign from '@/components/orderRentInfo/Sign.vue';
	import GiveBack from '@/components/orderRentInfo/GiveBack.vue';

	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	import {
		getOrderDetail,
		orderTake,
		orderDel,
		orderCancel,
		strToBase64Api,
		orderStatusImgApi,
		closeMyOrder,
		EFaceVerifyOrder
	} from '@/api/order.js';
	import {
		userCenterInfo
	} from '@/api/user.js';
	import {
		cartBatchAddApi
	} from '@/api/product.js';
	import orderGoods from '../components/orderGoods';
	import ClipboardJS from '@/plugin/clipboard/clipboard.js';
	import {
		toLogin
	} from '@/libs/login.js';

	import {
		mapGetters
	} from 'vuex';
	// #ifdef MP
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
	// #endif
	import {
		setThemeColor
	} from '@/utils/setTheme.js';
	import {
		Debounce
	} from '@/utils/validate.js';
	const app = getApp();
	export default {
		components: {
			Closed,
			WaitingReview,
			WaitPay,
			Sign,
			GiveBack,
			orderGoods,
			easyLoadimage
		},
		data() {
			return {
				isReletOrder:'',
				returnStatus:'',
				depositStatus: '', //授权状态
				codeImg: '',
				qrcodeSize: 100,
				orderNo: '',
				cartInfo: [], //购物车产品
				orderInfo: {
					systemStore: {},
					pstatus: {}
				}, //订单详情
				status: {}, //订单底部按钮状态
				totalPrice: '0',
				id: 0, //订单id
				uniId: '',
				utils: this.$util,
				againStatus: 0,
				type: 0, //订单类型 0-普通订单，1-视频号订单,2-秒杀订单
				isShow: true,
				theme: app.globalData.theme,
				bgColor: '#e93323',
				userAddress: [],
				shippingType: 1,
				statusPic: '',
				isUserAddress: false, //是否只显示一次收货地址
				goodsId: "", //商品id
				merId: '', //店铺id
				nickname: '', //支付宝姓名
				uniappShowModel: false, //默认不显示
				items: [{
						value: '想要重新下单',
						name: '想要重新下单',
					},
					{
						value: '商品价格较贵',
						name: '商品价格较贵'
					},
					{
						value: '等待时间长',
						name: '等待时间长'
					},
					{
						value: '是想了解流程',
						name: '是想了解流程'
					},
					{
						value: '不想要了',
						name: '不想要了'
					}
				],
				reason: {
					reason: ''
				}
			};
		},
		computed: {
			...mapGetters(['isLogin', 'chatUrl', 'userInfo'])
		},
		onLoad: function(options) {
			if (!options.orderNo)
				return this.$util.Tips({
					title: '缺少参数'
				}, {
					tab: 3,
					url: 1
				});
			this.depositStatus = options.depositStatus;
			this.id = options.id;
			this.goodsId = options.goodsId;
			this.merId = options.merId;
			this.isReletOrder = options.isReletOrder;
			this.returnStatus = options.returnStatus;
			this.$set(this, 'orderNo', options.orderNo);
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor
			});

			this.getUserCenterInfo();
		},
		onShow() {
			if (this.isLogin) {
				this.getOrderInfo();
			} else {
				toLogin();
			}
		},
		onHide: function() {
			this.isClose = true;
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		onReady: function() {
			// #ifdef H5
			this.$nextTick(function() {
				const clipboard = new ClipboardJS('.copy-data');
				clipboard.on('success', () => {
					this.$util.Tips({
						title: '复制成功'
					});
				});
			});
			// #endif
		},
		methods: {
			//去支付
			toPayFor() {
				//跳转支付详情页
				uni.navigateTo({
					url: `/pages/goods/order_details/payInfo?orderNo=${this.orderNo}&isBuyout=${0}&renewal=${0}`
				});
			},
			//去买断
			toBuyOut(){
				uni.navigateTo({
					url: `/pages/goods/order_details/payInfo?orderNo=${this.orderNo}&isBuyout=${1}&renewal=${0}`
				});
			},
			//去续租
			tapContinue(){
				uni.navigateTo({
					url: `/pages/goods/order_details/payInfo?orderNo=${this.orderNo}&isBuyout=${0}&renewal=${1}`
				});
			},
			//查看账单
			toShowBill() {
				uni.navigateTo({
					url: `/pages/goods/order_details/billInfo?orderNo=${this.orderNo}&status=${this.orderInfo.status}`
				});
			},
			//去归还
			returnBack() {
				const detail = {
					serialNumber: this.orderInfo.serialNumber,
					trackingNumber: this.orderInfo.trackingNumber,
					goodsImage: this.orderInfo.orderProduct.goodsImage,
					goodsName: this.orderInfo.orderProduct.goodsName,
					specName: this.orderInfo.orderProduct.specName,
					merId:this.orderInfo.orderProduct.merId
				}
				uni.navigateTo({
					url: `/pages/goods/give_back/index?orderNo=${this.orderNo}&detail=` + JSON.stringify(detail)
				});
			},
			//归还详情
			backInfo() {
				const detail = {
					goodsImage: this.orderInfo.orderProduct.goodsImage,
					goodsName: this.orderInfo.orderProduct.goodsName,
					specName: this.orderInfo.orderProduct.specName
				}
				uni.navigateTo({
					url: `/pages/goods/give_back/details?orderNo=${this.orderNo}&detail=` + JSON.stringify(detail)
				});
			},
			//查询物流
			findMyFast() {
				uni.navigateTo({
					url: `/pages/other/logistics?tradeNo=${this.orderInfo.orderPayment.tradeNo}&logisticsCode=${this.orderInfo.orderExpress.expressCode}&waybillNo=${this.orderInfo.orderExpress.expressNumber}`
				});
			},
			radioChange: function(evt) {
				this.reason.reason = evt.detail.value;
			},
			//取消订单
			cancelOrder() {
				this.uniappShowModel = true;
				// closeMyOrder(this.orderInfo)
				// 	.then(res => {
				// 		if (res.code == 200) {
				// 			this.$util.Tips({
				// 				title: '订单取消成功'
				// 			});
				// 			this.getOrderInfo();
				// 		}
				// 	})
			},
			// 点击确定按钮模态框消失
			confirm() {
				if(!this.reason.reason){
					that.$util.Tips({
						title: '请选择一个取消原因'
					});
					return;
				}
				closeMyOrder(this.orderNo,this.reason.reason)
					.then((res) => {
						this.uniappShowModel = false;
						this.getOrderInfo();
						that.$util.Tips({
							title: '取消成功',
							icon: 'success'
						});
					})
					.catch((err) => {
						return that.$util.Tips({
							title: err
						});
					});
			},
			
			//跳转商品详情页
			toPathProduct() {
				uni.navigateTo({
					url: '/pages/goods/goods_details/index?id=' + this.goodsId + '&merId=' + this.merId
				})
			},
			//去完善资料
			toDetail() {
				uni.navigateTo({
					url: `/pages/users/uploadUserInfoAli/index`
				});
			},
			//去授权
			verifySystem() {
				const that = this;
				EFaceVerifyOrder(this.orderInfo.orderNo)
					.then(res => {
						if (res.code == 200) {
							my.tradePay({
								orderStr: res.data
									.orderStr, // 完整的支付参数拼接成的字符串，从 alipay.fund.auth.order.app.freeze 接口获取
								success: (res) => {
									console.log(res, '成功回调')
									if (rusult.resultCode == 9000) {
										uni.redirectTo({
											url: '/pages/other/orderSuccess'
										})
									} else {
										uni.showToast({
											title: '免押失败',
											icon: 'none'
										})
									}
								},
								fail: (res) => {
									my.alert({
										content: JSON.stringify(res),
									});
								}
							});
						} else {
							my.alert({
								content: res.message
							});
						}
					})
					.catch(err=>{
						my.alert({
							content: err
						});
					})
			},
			/**
			 * 打开支付组件
			 *
			 */
			goPay: Debounce(function(item) {
				uni.showLoading({
					title: '加载中...'
				});

				uni.navigateTo({
					url: `/pages/goods/order_payment/index?orderNo=${item.orderNo}&payPrice=${item.payPrice}`
				});
			}),
			//是否完善资料
			getUserCenterInfo: function() {
				//if (this.centerMenu.length) return;
				userCenterInfo().then(res => {
					this.nickname = res.data.nickname;
				}).catch(err => {

				});
			},
			/**
			 * 拨打电话
			 */
			makePhone: function(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			/**
			 * 打开地图
			 *
			 */
			showMaoLocation: function(e) {
				if (!e.merLatitude || !e.merLongitude)
					return this.$util.Tips({
						title: '缺少经纬度信息无法查看地图！'
					});
				//#ifdef H5
				if (this.$wechat.isWeixin() === true) {
					this.$wechat
						.seeLocation({
							latitude: parseFloat(e.merLatitude),
							longitude: parseFloat(e.merLongitude),
							name: e.merName,
							address: e.merAddressDetail
						})
						.then((res) => {
							console.log('success');
						});
				} else {
					//#endif
					uni.openLocation({
						latitude: parseFloat(e.merLatitude),
						longitude: parseFloat(e.merLongitude),
						scale: 8,
						name: e.merName,
						address: e.merAddressDetail,
						success: function() {}
					});
					// #ifdef H5
				}
				//#endif
			},
			orderStatusImg() {
				let that = this;
				orderStatusImgApi()
					.then((res) => {
						res.data.map((item) => {
							if (item.title === 'await_pay' && this.orderInfo.status === 0) {
								this.statusPic = item.pic;
							} else if (item.title === 'await_shipped' && this.orderInfo.status === 1) {
								this.statusPic = item.pic;
							} else if (item.title === 'receiving' && this.orderInfo.status === 3) {
								this.statusPic = item.pic;
							} else if (item.title === 'spike' && this.orderInfo.status === 2) {
								this.statusPic = item.pic;
							} else if (item.title === 'complete' && this.orderInfo.status === 4) {
								this.statusPic = item.pic;
							}
						});
					})
					.catch((err) => {
						that.$util.Tips({
							title: err
						});
					});
			},
			/**
			 * 获取订单详细信息
			 *
			 */
			getOrderInfo: function() {
				let that = this;
				uni.showLoading({
					title: '正在加载中'
				});
				getOrderDetail(that.orderNo)
					.then((res) => {
						uni.hideLoading();
						let data = res.data;
						data.id = that.id;
						that.$set(that, 'orderInfo', data);

					})
					.catch((err) => {
						uni.hideLoading();
						return that.$util.Tips({
							title: err
						});
					});
			},
			/**
			 *
			 * 生成二维码
			 */
			markCode(text) {
				strToBase64Api({
					height: '145',
					text: text,
					width: '145'
				}).then((res) => {
					this.codeImg = res.data.code;
				});
			},
			/**
			 *
			 * 剪切订单号
			 */
			// #ifndef H5
			handleCopy: function(num) {
				uni.setClipboardData({
					data: num
				});
			},
			// #endif
			/**
			 * 打电话
			 */
			goTel: function() {
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.deliveryId
				});
			},
			/**
			 * 设置底部按钮
			 *
			 */
			getOrderStatus: function() {
				let orderInfo = this.orderInfo || {},
					_status = orderInfo.pstatus || {
						type: 0
					},
					status = {};
				let type = parseInt(_status.type),
					delivery_type = orderInfo.deliveryType,
					seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
					bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
					combination_id = orderInfo.combinationId ? parseInt(orderInfo.combinationId) : 0;
				status = {
					type: type == 9 ? -9 : type,
					class_status: 0
				};
				if (type == 1 && combination_id > 0) status.class_status = 1; //查看拼团
				if (type == 2 && delivery_type == 'express') status.class_status = 2; //查看物流
				if (type == 2) status.class_status = 3; //确认收货
				if (type == 4 || type == 0) status.class_status = 4; //删除订单
				if (!seckill_id && !bargain_id && !combination_id && (type == 3 || type == 4)) status.class_status =
					5; //再次购买
				this.$set(this, 'status', status);
			},
			/**
			 * 去拼团详情
			 *
			 */
			goJoinPink: function() {
				uni.navigateTo({
					url: '/pages/activity/goods_combination_status/index?id=' + this.orderInfo.pinkId
				});
			},
			/**
			 * 再此购买
			 *
			 */
			goOrderConfirm: Debounce(function() {
				uni.showLoading({
					title: '加载中...'
				});
				let cartListRequest = [];
				let that = this;
				this.cartInfo.map((item) => {
					cartListRequest.push({
						productId: parseFloat(item.productId),
						productAttrUnique: item.attrValueId,
						cartNum: parseFloat(item.payNum)
					});
				});
				cartBatchAddApi(cartListRequest)
					.then(function(res) {
						uni.switchTab({
							url: '/pages/order_addcart/order_addcart'
						});
					})
					.catch((res) => {
						return this.$util.Tips({
							title: res
						});
					});
			}),
			confirmOrder: Debounce(function() {
				let that = this;
				uni.showModal({
					title: '确认收货',
					content: '为保障权益，请收到货确认无误后，再确认收货',
					success: function(res) {
						if (res.confirm) {
							orderTake(that.orderNo)
								.then((res) => {
									return that.$util.Tips({
											title: '操作成功',
											icon: 'success'
										},
										function() {
											that.getOrderInfo();
										}
									);
								})
								.catch((err) => {
									return that.$util.Tips({
										title: err
									});
								});
						}
					}
				});
			}),
			/**
			 *
			 * 删除订单
			 */
			delOrder: Debounce(function() {
				uni.showModal({
					content: '确定删除该订单',
					cancelText: '取消',
					confirmText: '确定',
					showCancel: true,
					confirmColor: '#f55850',
					success: (res) => {
						if (res.confirm) {
							let that = this;
							orderDel(this.orderNo)
								.then((res) => {
									return that.$util.Tips({
										title: '删除成功',
										icon: 'success'
									}, {
										tab: 4,
										url: '/pages/user/index'
									});
								})
								.catch((err) => {
									return that.$util.Tips({
										title: err
									});
								});
						} else {}
					}
				});
			}),
		// 	cancelOrder: Debounce(function() {
		// 		let self = this;
		// 		uni.showModal({
		// 			title: '提示',
		// 			content: '确认取消该订单?',
		// 			success: function(res) {
		// 				if (res.confirm) {
		// 					orderCancel(self.orderNo)
		// 						.then((data) => {
		// 							self.$util.Tips({
		// 								title: '取消成功'
		// 							}, {
		// 								tab: 4,
		// 								url: '/pages/user/index'
		// 							});
		// 						})
		// 						.catch((err) => {
		// 							self.$util.Tips({
		// 								title: err
		// 							});
		// 							self.getDetail();
		// 						});
		// 				} else if (res.cancel) {
		// 					console.log('用户点击取消');
		// 				}
		// 			}
		// 		});
		// 	})
		}
		
	};
</script>

<style scoped lang="scss">
	.box {
		width: 200px;
		height: 10px;
	}

	.box-title {
		font-size: 20px;
	}

	.box-:hover {
		background-color: red;
	}

	.box .text {
		background-color: pink;
	}

	.nav {
		padding: 40px 20px;
		background-color: rgba(255, 110, 19, 1);
		color: white;
	}

	.nav h4,
	.nav div,
	.nav i {
		flex-grow: 1;
	}

	.nav h4 {
		text-align: center;
	}

	.person {
		/* width: 375px; */
		margin: 10px;
		background-color: #fff;
		padding: 10px;
		align-items: center;
	}

	.person-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 使原图不受挤压 */
		flex-shrink: 0;
	}

	.person-info {
		font-size: 15px;
		color: #262626;
	}

	.person-info span:last-child {
		margin-left: 20px;
	}

	.person-address {
		font-size: 12px;
		line-height: 18px;
		color: #333;
	}

	/* 商品信息 */
	.goods {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.goods img:first-child {
		width: 85px;
		height: 85px;
	}

	.goods-info {
		height: 35px;
		font-size: 13px;
		line-height: 19px;
		color: #262626;
		/* 溢出隐藏，省略号 */
		overflow: hidden;
		/* 文本超出给予省略号 */
		text-overflow: ellipsis;
		/* 溢出不换行 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 2;
	}

	.goods-tag {
		margin: 10px 0;
	}

	.goods-tag span {
		font-size: 11px;
		color: #888;
		background-color: rgb(246, 247, 247);
	}

	.goods-price-icon {
		font-size: 9px;
		color: red;
	}

	.goods-price-num {
		font-size: 16px;
		color: red;
	}

	.line-through {
		text-decoration: line-through;
	}

	.gray {
		color: #888;
	}

	.goods-price p:last-child {
		margin-left: 10px;
	}

	/* 配送 */
	.peisong {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.peisong-item {
		margin: 20px 0;
	}

	.peisong-tips {
		font-size: 12px;
		color: #989898;
		margin-left: 20px;
		/* 溢出省略显示省略号一行显示 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 20px;
	}

	/* 总价 */
	.zongjia {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.zhekou {
		color: red;
	}

	.zongjia-yunfei {
		margin: 20px 0;
	}

	/* 合计支付 */
	.toPay {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background-color: #fff;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: right;
	}

	.toPay span:first-child {
		font-size: 11px;
		letter-spacing: 1px;
		line-height: 19px;
		color: #1e1e1e;
	}

	.toPay span:last-child {
		font-size: 13px;
		line-height: 19px;
		color: #cf4444;
		font-weight: 600;
	}

	.toPay-btn {
		width: 90%;
		height: 35px;
		border-radius: 3px;
		background-color: rgba(255, 110, 19, 1);
		font-size: 13px;
		text-align: center;
		line-height: 35px;
		color: #fff;
	}

	.flex1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-icon {
		border-bottom: 1px solid #E4E7ED;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.nav-status {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.supplement {
		background-color: #409EFF;
		color: white;
		font-size: .9em;
		padding: 5px 15px;
		border-radius: 15px;
	}

	.description {
		color: white;
		font-size: 1em;
		margin-top: 20px;
	}

	.discount-class {
		background-color: rgba(237, 125, 61, 0.0705882352941176);
	}

	.zhimatip {
		border: 1px solid #rgba(255, 110, 19, 1);
		border-radius: 15px;
		color: rgba(255, 110, 19, 1);
	}

	.rent-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rent-time-item {
		width: 40%;
		text-align: center;
	}

	.time-name {
		font-weight: bold;
		font-size: 1.1em;
	}

	.time-data {
		font-size: .9em;
		color: #C0C4CC;
		padding-top: 15px;
	}
	
	
	.uniappBgdCol {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 99;
		-moz-opacity: 0.6;
		opacity: .6;
		filter: alpha(opacity=88);
	}
	
	.uniappContant {
		position: fixed;
		top: 20%;
		left: 50%;
		width: 80%;
		margin-left: -40%;
		background-color: white;
		z-index: 100;
		border-radius: 10rpx;
	}
	
	.uniappTitle {
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #161303;
		font-size: 28rpx;
		padding: 20rpx 0rpx;
	}
	
	.uniappNotice {
		font-size: 28rpx;
		color: #121212;
		display: flex;
		justify-content: center;
		padding: 20rpx 0 40rpx 0rpx;
	}
	
	.uniappBtn {
		display: flex;
		justify-content: space-between;
	}
	
	.uniappBtn view {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4% 0%;
		font-size: 28rpx;
		border-top: 1px solid #E4E7ED;
	}
	
	.uniappBtn view:first-child {
		border-right: 1px solid #E4E7ED;
	}
	
	.uniappBtn view:last-child {
		color: rgba(255, 110, 19, 1);
	}
	.uni-list-cell-pd{
		margin: 3px 0;
	}
</style>

